<template>
	<uni-table stripe border emptyText="暂无更多数据">
		<uni-tr>
			<uni-th  align="center">姓名</uni-th>
<!-- 			<uni-th width="100" align="center">用户名</uni-th>
			<uni-th width="100" align="center">部门</uni-th> -->
			<!-- <uni-th width="50" align="center">权重</uni-th> -->
			<uni-th  align="center">接单开关</uni-th>
		</uni-tr>
		<view class="l-dragSort" :style="{height:initListPosition[0].height * listArray.length + 'px'}"
			@touchmove.stop.prevent>

			<view class="listItem" @touchstart="onTouchstart($event, index)" @touchmove="onTouchmove"
				@touchend="onTouchend" v-for="(item,index) in listArray" :key="index"
				:style="{'transition': curretnItemIndex === index ? 'initial' : '.3s','top': listPosition[index].top + 'px'}">
				<uni-tr>
					<uni-td  align="center">{{item.name}}</uni-td>
<!-- 					<uni-td width="100" align="center">{{item.username}}</uni-td>
					<uni-td width="100" align="center">{{item.organize_name}}</uni-td> -->
					<!-- <uni-td width="50" align="center">{{item.weight}}</uni-td> -->
					<uni-td  align="center">
						<view class="flex flex-center">
							<uv-switch v-model="item.order_switch" @change="asyncChange(item)" :activeValue="1"
								:inactiveValue="0">
							</uv-switch>
						</view>
					</uni-td>
				</uni-tr>
			</view>
		</view>
	</uni-table>

</template>

<script>
    import reqApi from "../../../../api/api.js";
	export default {
		name: "lDragSort",
		props: {
			//列表
			list: {
				type: Array,
				default: []
			},
			// 列表每行高度
			lineHeight: {
				type: Number,
				default: 80
			}
		},
		data() {
			return {
				listArray: [],
				// 所有元素定位位置
				listPosition: [],
				// 记录拖动前元素定位位置
				initListPosition: [],
				// 记录当前拖动元素的下标
				curretnItemIndex: -1,
				// 记录拖动前的位置
				recordPosition: {
					y: 0
				},
				// 记录拖动前的定位位置
				recordCurrentPositionItem: {
					top: 0
				},
				// 是否正在交换位置
				isChange: false
			}
		},
		created() {
			console.log("子组件", this.list);
			this.init();
			this.listArray = [...this.list];
		},
		methods: {
			asyncChange(item) {
				console.log("item", item.order_switch);
				reqApi.orderSwitch({
					id: item.id,
					order_switch: item.order_switch
				}).then(res => {
					console.log("修改成功");
				})
			},
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.listItem').fields({
					rect: true,
					size: true
				}, data => {
					data.forEach((item, index) => {
						this.listPosition.push({
							height: item.height,
							top: item.height * index,
						});
					});
					this.initListPosition = [...this.listPosition]
				});
				query.exec(); //执行所有请求
			},
			onTouchstart(event, index) {
				const {
					pageY
				} = event.touches[0];

				// 记录当前拖动元素的下标
				this.curretnItemIndex = index;
				// 记录拖动前的位置
				this.recordPosition = {
					y: pageY
				};
				// 记录拖动前的定位位置
				this.recordCurrentPositionItem = this.listPosition[index];
			},
			onTouchmove(event) {
				const {
					pageY
				} = event.touches[0];

				// 获取移动的差
				this.$set(this.listPosition, this.curretnItemIndex, {
					top: this.listPosition[this.curretnItemIndex].top + (pageY - this.recordPosition
						.y),
				});
				// 记录位置
				this.recordPosition = {
					y: pageY
				};
				// 向下
				if (this.listPosition[this.curretnItemIndex].top >= this.listPosition[this.curretnItemIndex + 1]?.top -
					this.initListPosition[0].height / 2) {
					if (this.isChange) return
					this.isChange = true
					let temp = this.listArray[this.curretnItemIndex]
					console.log(temp)
					this.listArray[this.curretnItemIndex] = this.listArray[this.curretnItemIndex + 1]
					this.listArray[this.curretnItemIndex + 1] = temp
					this.listPosition[this.curretnItemIndex + 1] = this.listPosition[this.curretnItemIndex]
					this.listPosition[this.curretnItemIndex] = this.recordCurrentPositionItem
					this.curretnItemIndex = this.curretnItemIndex + 1
					this.recordCurrentPositionItem = this.initListPosition[this.curretnItemIndex]
					this.isChange = false
				}
				// 向上
				if (this.listPosition[this.curretnItemIndex].top <= this.listPosition[this.curretnItemIndex - 1]?.top +
					this.initListPosition[0].height / 2) {
					if (this.isChange) return
					this.isChange = true
					let temp = this.listArray[this.curretnItemIndex]
					console.log(temp)
					this.listArray[this.curretnItemIndex] = this.listArray[this.curretnItemIndex - 1]
					this.listArray[this.curretnItemIndex - 1] = temp
					this.listPosition[this.curretnItemIndex - 1] = this.listPosition[this.curretnItemIndex]
					this.listPosition[this.curretnItemIndex] = this.recordCurrentPositionItem
					this.curretnItemIndex = this.curretnItemIndex - 1
					this.recordCurrentPositionItem = this.initListPosition[this.curretnItemIndex]
					this.isChange = false
				}
			},

			onTouchend(event) {
				// 拖动元素归位
				this.listPosition[this.curretnItemIndex] = this.initListPosition[this
					.curretnItemIndex];
				this.curretnItemIndex = -1;
				this.$emit('change', [...this.listArray])
			},
		}
	}
</script>

<style scoped lang="scss">
	.l-dragSort {
		width: 100%;
		position: relative;

		.listItem {
			width: 100%;
			position: absolute;
		}
	}

	.activeClass {
		box-shadow: 0 0px 50rpx #cfcfcf;
		z-index: 999;
	}
</style>
